<template>
    <div>
        <!-- 商家信息 -->
        <div class="details">
            <div class="details_info">
                <div class="details_image">
                    <van-image
                        fit="contain"
                        :src="'http://kumanxuan1.f3322.net:8001/img/'+InfoList.image_path"
                    />
                </div>
                <!-- 配送 -->
                <div class="details_right">
                    <h2>{{InfoList.name}}</h2>
                    <div class="right_info">
                        <div class="left">
                            <p>2113</p>
                            <!-- <p>{{InfoList.delivery_mode.text}}/{{InfoList.piecewise_agent_fee.tips}}</p> -->
                            <p>公告:111</p>
                        </div>
                        <div class="right">
                            <van-icon name="arrow" size="22" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 满减 -->
            <div>
                <van-nav-bar>
                    <template #left>
                        <van-tag type="warning">简</van-tag>
                        <span>满减</span>/
                        <van-tag type="warning">简</van-tag>
                        <span>满减</span>
                    </template>
                    <template #right>
                        <p>1个活动</p>
                        <van-icon name="arrow" size="18" class="icon"/>
                    </template>
                </van-nav-bar>
            </div>
        </div>
        <!-- 产品信息 -->
        <van-tabs title-active-color="#1989fa" color="#1989fa" line-width="50">
            <div></div>
            <van-tab title="商品">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="标签名称" dot />
                    <van-sidebar-item title="标签名称" badge="5" />
                    <van-sidebar-item title="标签名称" badge="99+" />
                </van-sidebar>
                <van-panel style="display:inline-block;width:80%;height:100vh;overflow-y:scroll;background:rgba(0,0,0,0)">
                    <template #header>
                       
                    </template>
                    <!-- 商品 -->
                    <van-card
                        v-for="item in 20"
                        :key="item"
                    > 
                    <template #thumb>
                        <span class="icon_top">新品</span>
                        <van-image  :src="'http://kumanxuan1.f3322.net:8001/img/171b022a48b2.jpg'"/>
                    </template>
                    <!-- 标题 -->
                    <template #title>
                        <div class="goods_box">
                            <div class="icon_left">
                                <h3>阿萨德红纱</h3>
                            </div>
                            <p class="icon_right">
                                <van-tag round plain color="#FF6347">
                                    <span>品牌</span>
                                </van-tag>
                            </p>
                        </div>
                    </template>
                    <!-- 内容 -->
                    <template #tags>
                        <!-- 描述 -->
                        <div class="goods_box miao_shu">
                            111
                        </div>
                        <div class="goods_box">
                            月售卖：111
                        </div>
                        <div class="goods_box">
                            <van-tag round plain color="#ff976a">
                                <span>1</span>
                            </van-tag>
                        </div>
                        <div class="goods_box">
                            <div class="icon_left Price">
                                ￥<span>222</span>
                            </div>
                            <div class="icon_right">

                                <van-stepper v-model="value" />
                            </div>
                        </div>
                        
                    </template>
                    <!-- <span class="icon_top"></span> -->
                    </van-card>

                </van-panel>
            </van-tab>

            <van-tab title="评价">
                123
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {getStore} from '../request/Api.js';
export default {
    data(){
        return {
            InfoList:[],
            activeKey: 0,
        }
    },
    created(){
        let {shopid} = this.$route.params;
        getStore({shopid}).then(res =>{
            console.log(res.data);
            if(res.status == 200){
                this.InfoList = res.data;
            }
            console.log(this.InfoList.activities);
        }) 
    },
     methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
}
</script>
<style lang="less" scope>
// 商家信息
.details{
    background:#aaa;
    .van-nav-bar.van-hairline--bottom{
        color:#fff;
        background:rgba(0,0,0,0);
        padding-bottom:20px;
        font-size:20px;
    }
    .icon{
        color:#fff;
    }
     .details_info{
        color:#fff;
        width:100%;
        display:flex;
        padding:20px;
        padding-bottom: 0;
        .details_image{
            flex:1;
        }
        .details_right{
            padding:0 25px;
            flex:3;
            .right_info{
                overflow: hidden;
                position: relative;
                .left{
                    float: left;
                }
                .right{
                    float:right;
                    position:absolute;
                    top:25%;
                    right:0;
                }
            }
        }
    }
}
// 商品、评价
.van-tabs.van-tabs--line{
    
    height:1rem;
    .van-tabs__wrap {
        overflow:visible;
    }
    .van-tabs__wrap.van-hairline--top-bottom{
        height:1rem;
        .van-tabs__nav.van-tabs__nav--line{
            // line-height:1rem;
            padding-bottom: 0;
            
            .van-tab.van-ellipsis{
                line-height:1rem;
                .van-tab__text{
                    font-size:0.4rem
                }
            }
        }   
        .van-tab.van-tab--active.van-ellipsis{
            line-height:1rem;
        }

    }
    // 左侧导航
    .van-tabs__content{
        .van-tab__pane{
            overflow:hidden;
            .van-sidebar{
                float:left;
                width:20%;
                height:100vh;
                overflow-y:scroll;
                .van-sidebar-item.van-sidebar-item--select{
                    border-width: 0.08rem;
                    border-color:rgb(25, 137, 250);
                    background:#FCFCFC;
                    
                }
                .van-sidebar-item{
                    line-height: 0.5rem;
                    background-color:rgba(0,0,0,0,0);
                    .van-sidebar-item__text{
                        height:0.6rem;
                        width:100%;
                        text-align: center;
                        font-size:0.33rem;
                        .van-infovan-sidebar-item__info,.van-info.van-sidebar-item__info{
                            width:0.3rem;
                            height:0.3rem;
                            line-height: 0.3rem;
                        }
                    }
                }
            }
        }
    }
    .van-card{
        background:#fff;
        position: relative;
        // padding:0.2rem 0.2rem;
        .van-card__thumb{
            padding:0.5rem 0.15rem 0 0;
        }
        .icon_top{
            position: absolute;
            border: 2px solid #FFFFFF;
            top: -0.106667rem;
            left: -0.213333rem;
            z-index: 4;
            font-family: 'dincondm';
            color: #FFFFFF;
            line-height: 20px;
            padding: 4px 8px;
            background:lightgreen;
        }   
        // 商品描述
        .miao_shu{
            color:#aaa;
        }
        // 商品价格
        .Price{
            color:orange;
            span{
                font-weight:1000;
            }
        }
    }
    // 商品
    .goods_box{
        overflow: hidden;
        position: relative;
        font-size:0.4rem;
        .icon_left{
            display:inline-block;
            position: absolute;
            top:15%;
        }
        .icon_right{
            display:inline-block;
            float:right;
            margin:10px 0;
        }
    }

}

   
 
</style>